<template>

      <div id="main" ref="radar_ref" style="position: relative;width: 500px;height: 500px;"></div>

</template>
<script>
  var mockData = [{
    text: '指标一',
    value: 2
  }, {
    text: '指标二',
    value: 3.2
  }, {
    text: '指标三',
    value: 5
  }, {
    text: '指标四',
    value: 4.1
  }, {
    text: '指标五',
    value: 2.8
  }]

  export default {
    name: 'test_map',
    data () {
      return {
        radar: null,
        timer: null
      }
    },
    mounted () {
      this.initChart()
      this.initRadar(mockData)
      this.startInterval()
    },
    methods: {
      initChart () {
        this.radar = this.$echarts.init(this.$refs.radar_ref)
      },
      initRadar (mockData) {

        let minAngle = 10	// 最小角度
        let indicator = []
        let data = []
        let idx = 0
        let randomArr = []
        randomArr = getRandom(360 / minAngle, mockData.length)
        for (var i = 0; i < 360 / minAngle; i++) {
          if (randomArr.indexOf(i) > -1) {
            indicator.push({
              text: mockData[idx].text
            })
            data.push(mockData[idx].value)
            idx++
          } else {
            indicator.push({
              text: i * 10 + '`'
            })
            data.push('-')
          }
        }

        var option = {
          backgroundColor: '#00186E',
          radar: [
            {
              indicator: indicator,
              center: ['50%', '50%'],
              radius: 180,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              name: {
                show: false,
                // formatter:'【{value}】',
                // textStyle: {
                //     color:'rgba(0, 255, 51, 1)'
                // }
              },
              splitArea: {
                areaStyle: {
                  color: 'rgba(255, 255, 255, 0)'
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(0, 255, 51, 0)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(0, 255, 51, 1)'
                }
              }
            }
          ],
          series: [
            {
              name: '雷达图',
              type: 'radar',
              symbol: 'circle',
              symbolSize: 24,
              silent: true,
              animationEasing: 'quarticOut',
              animationEasingUpdate: 'quarticOut',
              animationDuration: 2000,
              animationDurationUpdate: 2000,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: 'rgba(0, 255, 51, 1)'
                  }
                }
              },
              itemStyle: {
                normal: {
                  opacity: 0
                },
                emphasis: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.3,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(0, 255, 51, 1)'
                    }, {
                      offset: 1,
                      color: 'rgba(255, 255, 255, .1)'
                    }]
                  },
                  borderWidth: 0,
                  opacity: 1
                }
              },
              data: [
                {
                  value: data,
                  label: {
                    normal: {
                      textStyle: {
                        color: 'rgba(0, 255, 51, 1)'
                      }
                    }
                  },
                  lineStyle: {
                    normal: {
                      opacity: 0
                    }
                  }
                }
              ]
            }
          ]
        }
        this.radar.setOption(option)

        function getRandom (range, count) {
          randomArr.length = 0
          for (var i = 0; i < count; i++) {
            var r = Math.round(Math.random() * (range - 1))
            randomArr.push(r)
          }
          return randomArr
        }

        this.animation()

      },
      startInterval () {
        if (this.timer) {
          clearInterval(this.timer) //保险起见，如果开始执行定时函数之前，存在timer 则将其清空
        }
        this.timer = setInterval(() => {
          //每隔4s
          this.initRadar(mockData)
        }, 4000)
      },
      animation () {
      }
    }

  }
</script>

<style lang="less" scoped>
  #main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  #main:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
    width: 180px;
    height: 180px;
    position: absolute;
    top: 14%;
    left: 14%;
    animation: radar-beam 4s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }

  @keyframes radar-beam {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
